<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ic="http://ivyteam.ch/jsf/component"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:pm="http://primefaces.org/mobile"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<title>JSF User Dialog</title>
	<h:outputScript library="ivy-webcontent" name="js/trainning.js"
		target="head">
	</h:outputScript>
	<h:outputStylesheet library="ivy-webcontent" name="css/style.css" />
</h:head>
<h:body>
	<h:panelGroup>
		<p:panel style="border:none">
			<label onclick="showFrmAddTask()"
				style="cursor: pointer; background-color: #edf1c0; border: 1px solid #b0be29; padding: 4px; margin-bottom: 3px;">New
				Task</label>

			<h:form id="frmNewTask" styleClass="frmNewTask" style="display:none;">
				<p:panelGrid>
					<p:row>
						<p:column>
								Task title
							</p:column>
						<p:column>
							<p:inputText id="inputTextTittle" styleClass="text" value="#{data.title}" />
							<p:watermark value="Input task title" for="inputTextTittle" />
						</p:column>
						<p:column>
							<h:commandButton value="+" update="@form" id="btnAdd"
								actionListener="#{logic.add}" />
						</p:column>
					</p:row>

					<p:row>
						<p:column>
								Description
							</p:column>
						<p:column>
							<p:inputTextarea  styleClass="scrollableHorizon text" id="inputTextareaDescription"
								value="#{data.description}" style="max-height:150px; overflow-y: auto;"/>
							<p:watermark value="Input task description"
								for="inputTextareaDescription" />
						</p:column>
						<p:column>
							<h:commandButton value="x" actionListener="#{logic.cancel}" />
						</p:column>
					</p:row>
				</p:panelGrid>
			</h:form>
		</p:panel>
	</h:panelGroup>
	<br />
	<br />
	<h:panelGroup>
		<p:panelGrid styleClass="dashboard" id="dashboard">
			<f:facet name="header">
				<p:row>
					<p:column>Ready</p:column>
					<p:column>Work</p:column>
					<p:column>Review</p:column>
					<p:column>Done</p:column>
				</p:row>
			</f:facet>
			<p:row>
				<p:column>
					<div class="lane">
						<ic:ch.soreco.component.TaskLane tasks="#{data.tasks}" status="1"
							callback="#{logic}" />
					</div>
				</p:column>

				<p:column>
					<div class="lane">
						<ic:ch.soreco.component.TaskLane tasks="#{data.tasks}" status="2"
							callback="#{logic}" />
					</div>
				</p:column>

				<p:column>
					<div class="lane">
						<ic:ch.soreco.component.TaskLane tasks="#{data.tasks}" status="3"
							callback="#{logic}" />
					</div>
				</p:column>

				<p:column>
					<div class="lane">
						<ic:ch.soreco.component.TaskLane tasks="#{data.tasks}" status="4"
							callback="#{logic}" />
					</div>
				</p:column>
			</p:row>
		</p:panelGrid>
	</h:panelGroup>
	
	<ui:include src="viewEditDialog.xhtml" />
	<ui:include src="historyTask.xhtml" />
	
	<script type="text/javascript">
		function showFrmAddTask() {
			$("#frmNewTask").toggle();
			return false;
		}
	</script>
</h:body>
</html>